<template>
  <view class="bg">
    <view class="steps">
      <view class="steps_item" v-for="(i, index) in infoList">
        <!-- 打卡时间 -->
        <text class="line-drop-time">
          <view class="line-drop"></view>
          <view class="line" :style="{ height: height + 'px' }" v-if="index != infoList.length - 1"></view>
          {{ i.date }}
          <up-tag v-if="i.is_apply == 1" :text="i.ftype" size="mini" plain></up-tag>
          <up-tag v-if="i.status == 0 && i.is_apply == 0" :text="i.type == '上午' ? '迟到' : '早退'" size="mini" plain
            type="warning"></up-tag>
          <up-tag v-if="i.status == -1 && i.is_apply == 0" text="缺卡" size="mini" plain type="error">
          </up-tag>

        </text>
        <!-- 迟到早退提示信息 -->
        <view v-if="i.abnormity != '' && i.is_apply == 0">
          <image src="@/static/icon/warning.svg"></image>
          <text>
            {{ i.abnormity }}
          </text>
        </view>
        <!-- 打卡位置 -->
        <view v-if="i.post != '' && i.post != undefined">
          <image src="@/static/icon/zuobiao.svg"></image>
          <text>
            {{ i.post }}
          </text>
        </view>
        <!-- 人脸验证暂定 -->
        <!-- <view v-if="i.date != '' || i.date != undefined">
					<image src="@/static/icon/renlianshibie.svg"></image>
					<text>
						{{ i.verifyStatus ? '人脸认证已通过' : '人脸认证未通过' }}
					</text>
				</view> -->
        <!-- 备注 -->
        <view v-if="i.is_apply == 1 && i.remark != ''">
          <image src="@/static/icon/shuqian.svg"></image>
          <text>
            {{ i.remark }}
          </text>
        </view>
        <!-- 异常处理 -->
        <view v-if="i.status == 0 && i.is_apply == 0">
          <u-button @tap="opentAction" cancelText="取消" :customStyle="{ width: '148rpx', height: '58rpx', margin: 0 }"
            text="异常处理"></u-button>
        </view>

        <view v-if="i.status == -1 && i.is_apply == 0">
          <u-button @tap="opentAction" :customStyle="{ width: '148rpx', height: '58rpx', margin: 0 }" text="异常处理">
          </u-button>
        </view>
      </view>
    </view>

    <!-- 处理异常弹框 -->
    <u-action-sheet @select="selectAction" @close="show = false" :actions="actionsList" :show="show"></u-action-sheet>
  </view>
</template>

<script>
export default {
  name: 'time-line',
  props: {
    infoList: {
      type: Array,
      default: []
    },
    color: {
      type: String,
      default: '#fff'
    },
    backgroundColor: {
      type: String,
      default: '#ff3838'
    }
  },
  data () {
    return {
      height: 0,
      show: false,
      actionsList: [
        // {
        // 	name:'园区管理补卡申请',
        // 	value: 8
        // },
        {
          name: '补卡申请',
          value: 8
        },
        {
          name: '请假申请单申请',
          value: 10
        },
        {
          name: '出差申请单-自驾车申请',
          value: 13
        },
        {
          name: '出差申请单申请',
          value: 12
        },
        // {
        // 	name:'园区管理-请假申请单申请',
        // 	value: 5
        // },
      ]
    };
  },
  mounted () {
    this.$nextTick(() => {
      uni.createSelectorQuery()?.selectAll(".line-drop").boundingClientRect(res => {
        if (res && res.length > 0) {
          this.height = +res[1].top - +res[0].top - 14;
        }
      }).exec(() => { });
    })
  },
  methods: {
    selectAction (e) {
      uni.navigateTo({
        url: `/pages/apply/form/index?id=${e.value}&formName=${e.name}审批`
      })
    },
    opentAction (e) {
      this.show = true;
    },
  }
};
</script>

<style lang="scss" scoped>
.steps {
  display: flex;
  flex-direction: column;

  .steps_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 68upx;
    padding-left: 60upx;

    .line-drop-time {
      position: relative;
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;

      .line-drop {
        position: absolute;
        left: -50rpx;
        top: 12rpx;
        width: 10upx;
        height: 10upx;
        border-radius: 50%;
        background-color: #ABAAB0;
      }

      .line {
        position: absolute;
        top: 32rpx;
        left: -46rpx;
        width: 1px;
        background-color: #E5E5E5;
      }
    }

    view {
      margin-top: 20rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #7C7C7C;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;

      image {
        width: 30rpx;
        height: 30rpx;
        vertical-align: -12%;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
